1
00:00:01,400 --> 00:00:05,430
所以我们这里有一个很大的逻辑错误

2
00:00:05,430 --> 00:00:06,470
在我们的代码中。

3
00:00:06,470 --> 00:00:09,220
我们遇到的问题是我们有硬编码 ID

4
00:00:09,220 --> 00:00:10,330
我们已经学到了

5
00:00:10,330 --> 00:00:13,780
我们如何找到并修复这个错误。

6
00:00:13,780 --> 00:00:17,170
现在假设我们没有使用其他两种方法中的任何一种。

7
00:00:17,170 --> 00:00:19,030
我们忽略了这个警告

8
00:00:19,030 --> 00:00:22,370
我们不知道为什么它的行为不正确。

9
00:00:22,370 --> 00:00:23,710
在这种情况下，

10
00:00:23,710 --> 00:00:25,960
如果你找不到错误

11
00:00:25,960 --> 00:00:28,400
或者如果你只是更喜欢这种方法，

12
00:00:28,400 --> 00:00:30,860
您可以转到此处的来源选项卡

13
00:00:30,860 --> 00:00:33,160
在浏览器开发者工具中

14
00:00:33,160 --> 00:00:35,520
最后你可以找到源文件

15
00:00:35,520 --> 00:00:38,300
目前正在该网页上使用。

16
00:00:38,300 --> 00:00:40,350
其中包括您的 JavaScript 代码。

17
00:00:40,350 --> 00:00:41,610
最酷的是

18
00:00:41,610 --> 00:00:43,740
这个React开发过程，

19
00:00:43,740 --> 00:00:45,630
这个 NPM 启动脚本在这里，

20
00:00:45,630 --> 00:00:46,950
最后运行

21
00:00:46,950 --> 00:00:49,340
是这样设置的，

22
00:00:49,340 --> 00:00:52,740
当然将代码推送到浏览器

23
00:00:52,740 --> 00:00:54,990
这是浏览器可执行的。

24
00:00:54,990 --> 00:00:57,760
但它也为浏览器提供了额外的信息

25
00:00:57,760 --> 00:01:01,240
浏览器开发工具可以获取

26
00:01:01,240 --> 00:01:04,569
让我们能够实际调试我们的代码

27
00:01:04,569 --> 00:01:07,610
以我们编写的原始形式。

28
00:01:07,610 --> 00:01:09,730
这样我们就可以使用该代码进行调试

29
00:01:09,730 --> 00:01:11,310
我们在这些文件中写入，

30
00:01:11,310 --> 00:01:13,880
即使从技术上来说这不是代码

31
00:01:13,880 --> 00:01:16,230
由浏览器执行。

32
00:01:16,230 --> 00:01:17,960
那么这个React开发过程，

33
00:01:17,960 --> 00:01:19,470
为浏览器提供了一座桥梁，

34
00:01:19,470 --> 00:01:21,440
在浏览器中运行的代码之间

35
00:01:21,440 --> 00:01:23,400
以及我们编写的代码，

36
00:01:23,400 --> 00:01:25,180
我们可以在这里访问此代码

37
00:01:25,180 --> 00:01:27,150
在来源选项卡中，

38
00:01:27,150 --> 00:01:29,830
转到该用户的文件夹

39
00:01:29,830 --> 00:01:31,200
你应该看到的。

40
00:01:31,200 --> 00:01:32,670
用户，您的用户名

41
00:01:32,670 --> 00:01:34,290
然后是源文件夹。

42
00:01:34,290 --> 00:01:38,240
在那里你可以找到你的 React 文件。

43
00:01:38,240 --> 00:01:42,213
我们的 IDE 中实际上也有这些文件。

44
00:01:43,950 --> 00:01:45,150
现在，如果你在这里找不到它，

45
00:01:45,150 --> 00:01:47,330
你还可以查看 Webpack 文件夹

46
00:01:47,330 --> 00:01:49,810
在那里你可能还会找到一个源文件夹

47
00:01:49,810 --> 00:01:52,010
与您的源文件。

48
00:01:52,010 --> 00:01:54,930
你可以环顾四周，因为有时它位于

49
00:01:54,930 --> 00:01:57,820
在不同的子文件夹中的不同节点中

50
00:01:57,820 --> 00:02:00,210
但在来源选项卡的某个地方，

51
00:02:00,210 --> 00:02:02,900
在这个文件和文件夹树中

52
00:02:02,900 --> 00:02:05,263
你应该找到你的原始源代码。

53
00:02:06,280 --> 00:02:08,070
然后你就可以随时潜水

54
00:02:08,070 --> 00:02:10,880
进入您想要分析的不同部分。

55
00:02:10,880 --> 00:02:13,210
您可以进入 CourseGoalItem

56
00:02:13,210 --> 00:02:15,540
例如，deleteHandler

57
00:02:15,540 --> 00:02:18,330
只需单击即可添加断点

58
00:02:18,330 --> 00:02:21,500
到您想要添加它的行号。

59
00:02:21,500 --> 00:02:23,930
在本例中，deleteHandler 函数

60
00:02:23,930 --> 00:02:26,550
当我们点击列表项时触发

61
00:02:26,550 --> 00:02:29,600
因为这就是删除过程开始的地方。

62
00:02:29,600 --> 00:02:32,520
所以也许这就是我们想要暂停代码的地方

63
00:02:32,520 --> 00:02:35,050
然后一步步执行代码

64
00:02:35,050 --> 00:02:36,803
这样我们就可以找到问题所在。

65
00:02:37,890 --> 00:02:39,680
一旦添加这样的断点

66
00:02:39,680 --> 00:02:41,660
如果您随后执行该操作，

67
00:02:41,660 --> 00:02:43,760
触发该代码部分

68
00:02:43,760 --> 00:02:45,710
断点所在的位置。

69
00:02:45,710 --> 00:02:50,600
一旦到达该断点行，代码执行就会停止。

70
00:02:50,600 --> 00:02:51,560
所以你看到这里，

71
00:02:51,560 --> 00:02:53,300
它在调试器中暂停

72
00:02:53,300 --> 00:02:56,090
该行现在以蓝色突出显示

73
00:02:56,090 --> 00:02:57,850
并且你已经获得了周围的信息

74
00:02:57,850 --> 00:02:59,690
在底部的那些盒子里。

75
00:02:59,690 --> 00:03:01,220
例如，您看到变量

76
00:03:01,220 --> 00:03:02,690
目前可用。

77
00:03:02,690 --> 00:03:05,593
您会看到调用堆栈等。

78
00:03:06,680 --> 00:03:08,150
现在你可以做一些很酷的事情了。

79
00:03:08,150 --> 00:03:12,150
您可以逐步执行您的代码。

80
00:03:12,150 --> 00:03:15,270
例如，这里我们调用 onDelete 方法

81
00:03:15,270 --> 00:03:17,680
例如，在 props 对象上。

82
00:03:17,680 --> 00:03:20,170
所以看看那里发生了什么

83
00:03:20,170 --> 00:03:24,260
我们可以使用“Step into next function call”按钮。

84
00:03:24,260 --> 00:03:27,110
如果你点击我们就在deleteItemHandler中

85
00:03:27,110 --> 00:03:28,950
这是被触发的函数

86
00:03:28,950 --> 00:03:30,853
因为道具的概念。

87
00:03:31,730 --> 00:03:34,616
在这里我们看到 setCourseGoals 函数

88
00:03:34,616 --> 00:03:36,170
正在被调用

89
00:03:36,170 --> 00:03:39,060
您还可以将鼠标悬停在此处的变量上

90
00:03:39,060 --> 00:03:41,540
查看当前存储在其中的值。

91
00:03:41,540 --> 00:03:44,470
例如，如果我将鼠标悬停在 goalId 上

92
00:03:44,470 --> 00:03:46,773
我看到这是目标1。

93
00:03:48,000 --> 00:03:51,490
现在，这可能对我有帮助，也可能没有帮助，

94
00:03:51,490 --> 00:03:53,950
但我可以看到我在这里有目标1

95
00:03:53,950 --> 00:03:55,640
当我点击这个目标时

96
00:03:55,640 --> 00:03:58,520
这实际上是我添加的第二个目标。

97
00:03:58,520 --> 00:04:03,080
现在我们可以在此处使用“跳过下一个函数调用”按钮

98
00:04:03,080 --> 00:04:06,910
完成 setCourseGoals 函数调用。

99
00:04:06,910 --> 00:04:08,040
那么现在，

100
00:04:08,040 --> 00:04:10,940
deleteItemHandler 基本完成

101
00:04:10,940 --> 00:04:12,720
我们得到的信息是

102
00:04:12,720 --> 00:04:15,750
我们有 goalId goal1

103
00:04:15,750 --> 00:04:17,209
为了这个目标我们删除了

104
00:04:17,209 --> 00:04:18,890
我们当然知道，

105
00:04:18,890 --> 00:04:20,733
是删除错误的目标。

106
00:04:21,870 --> 00:04:24,690
现在我们可以恢复脚本执行

107
00:04:24,690 --> 00:04:26,890
因为我们已经完成了这个调试周期

108
00:04:26,890 --> 00:04:28,130
然后再试一次

109
00:04:28,130 --> 00:04:29,960
然后单击下一个目标。

110
00:04:29,960 --> 00:04:32,480
并在此处深入研究下一个函数调用

111
00:04:33,490 --> 00:04:37,030
看到这里我们有和以前一样的 goalId。

112
00:04:37,030 --> 00:04:39,560
所以现在我们应该看到，

113
00:04:39,560 --> 00:04:40,420
等一下，

114
00:04:40,420 --> 00:04:43,140
如果我们在两个不同的目标上必须使用相同的 ID

115
00:04:43,140 --> 00:04:44,510
我点击了这里

116
00:04:44,510 --> 00:04:46,090
这似乎是问题所在

117
00:04:46,090 --> 00:04:48,640
为什么错误的目标被删除了。

118
00:04:48,640 --> 00:04:50,240
所以这也许是有道理的

119
00:04:50,240 --> 00:04:52,920
我们在哪里恢复脚本执行

120
00:04:52,920 --> 00:04:54,710
然后回到代码中

121
00:04:54,710 --> 00:04:56,370
我们实际添加目标的地方

122
00:04:56,370 --> 00:04:58,700
因为那是我们设置 ID 的地方。

123
00:04:58,700 --> 00:05:00,410
只需查看该代码，

124
00:05:00,410 --> 00:05:02,030
我们当然应该能够看到

125
00:05:02,030 --> 00:05:05,363
为什么我们每个目标都有 goal1。

126
00:05:06,220 --> 00:05:08,080
这就是我们如何使用断点

127
00:05:08,080 --> 00:05:10,530
一步步获取我们的代码

128
00:05:10,530 --> 00:05:12,310
甚至检查值

129
00:05:12,310 --> 00:05:14,350
存储在变量等中

130
00:05:14,350 --> 00:05:18,493
找出为什么某事物会这样表现。

131
00:05:19,410 --> 00:05:21,050
所以断点，

132
00:05:21,050 --> 00:05:23,430
您随时可以再次单击它们来清除它们。

133
00:05:23,430 --> 00:05:25,740
断点是另一个有用的工具

134
00:05:25,740 --> 00:05:28,280
用于分析您的代码以理解它

135
00:05:28,280 --> 00:05:31,600
以及查找和修复此类错误。

136
00:05:31,600 --> 00:05:33,160
这样，我就会恢复这个

137
00:05:33,160 --> 00:05:35,080
到 Math.random.toString

138
00:05:35,080 --> 00:05:38,040
这当然是我们可以使用的 ID

139
00:05:38,040 --> 00:05:39,640
没有得到那个警告。

140
00:05:39,640 --> 00:05:41,710
现在，如果我再尝试一次，

141
00:05:41,710 --> 00:05:44,020
你看我没有收到警告。

142
00:05:44,020 --> 00:05:45,760
如果我现在添加多个目标，

143
00:05:45,760 --> 00:05:47,310
你看如果我点击第一个目标，

144
00:05:47,310 --> 00:05:49,210
我删除了第一个目标。

145
00:05:49,210 --> 00:05:50,780
所以这现在有效，

146
00:05:50,780 --> 00:05:52,920
这是另一套重要的工具。

147
00:05:52,920 --> 00:05:55,930
浏览器自带的调试工具

148
00:05:55,930 --> 00:05:58,280
这里我是在Chrome浏览器中展示的

149
00:05:58,280 --> 00:06:01,483
但 Firefox 或 Safari 中也有类似的工具。